<template>
  <div>
    <el-radio-group v-model="type">
      <el-radio-button label="1">食谱</el-radio-button>
      <el-radio-button label="2">视频</el-radio-button>
      <el-radio-button label="3">资讯</el-radio-button>
    </el-radio-group>
    <el-table :data="contentArr">
      <el-table-column align="center" type="index" label="商品编号" width="100px"/>
      <el-table-column align="center" prop="title" label="商品标题" width="200px"/>
      <el-table-column align="center" prop="breif" label="商品摘要" width="400px"/>
      <el-table-column align="center" prop="categoryName" label="商品类型" width="100px"/>
      <el-table-column align="center"  label="商品封面" width="200px">
        <template slot-scope="scope">
          <img :src="scope.row.imgUrl" width="80px"/>
        </template>
      </el-table-column>
      <el-table-column align="center" prop="viewCount" label="浏览量" width="100px"/>
      <el-table-column align="center" prop="commentCount" label="评论量" width="100px"/>
      <el-table-column align="center" prop="createTime" label="发布时间" width="150px"/>

      <el-table-column
          align="center"
          fixed="right"
          label="操作"
          width="200">
        <template slot-scope="scope" >
          <el-button @click="handleClick(scope.row)" type="success" size="small">修改</el-button>
          <el-button type="danger" size="small">删除</el-button>
        </template>
      </el-table-column>

    </el-table>
  </div>
</template>

<script>
export default {
  data() {
    return {
      type: 1,
      contentArr: [{
        title: '入口即酥的超浓花生酱酥饼',
        breif: '花生酱+芝麻油=超浓郁花生香 没有汤粉 用了白砂糖',
        categoryName: '家常菜',
        imgUrl: '/imgs/a.jpg',
        viewCount: 8,
        commentCount: 0,
        createTime: '2024/2/22'
      }, {
        title: '入口即酥的超浓花生酱酥饼',
        breif: '花生酱+芝麻油=超浓郁花生香 没有汤粉 用了白砂糖',
        categoryName: '家常菜',
        imgUrl: '/imgs/a.jpg',
        viewCount: 8,
        commentCount: 0,
        createTime: '2024/2/22'
      },
        {
          title: '入口即酥的超浓花生酱酥饼',
          breif: '花生酱+芝麻油=超浓郁花生香 没有汤粉 用了白砂糖',
          categoryName: '家常菜',
          imgUrl: '/imgs/a.jpg',
          viewCount: 8,
          commentCount: 0,
          createTime: '2024/2/22'
        },
        {
          title: '入口即酥的超浓花生酱酥饼',
          breif: '花生酱+芝麻油=超浓郁花生香 没有汤粉 用了白砂糖',
          categoryName: '家常菜',
          imgUrl: '/imgs/a.jpg',
          viewCount: 8,
          commentCount: 0,
          createTime: '2024/2/22'
        },
        {
          title: '入口即酥的超浓花生酱酥饼',
          breif: '花生酱+芝麻油=超浓郁花生香 没有汤粉 用了白砂糖',
          categoryName: '家常菜',
          imgUrl: '/imgs/a.jpg',
          viewCount: 8,
          commentCount: 0,
          createTime: '2024/2/22'
        },
        {
          title: '入口即酥的超浓花生酱酥饼',
          breif: '花生酱+芝麻油=超浓郁花生香 没有汤粉 用了白砂糖',
          categoryName: '家常菜',
          imgUrl: '/imgs/a.jpg',
          viewCount: 8,
          commentCount: 0,
          createTime: '2024/2/22'
        },
        {
          title: '入口即酥的超浓花生酱酥饼',
          breif: '花生酱+芝麻油=超浓郁花生香 没有汤粉 用了白砂糖',
          categoryName: '家常菜',
          imgUrl: '/imgs/a.jpg',
          viewCount: 8,
          commentCount: 0,
          createTime: '2024/2/22'
        }, {
          title: '入口即酥的超浓花生酱酥饼',
          breif: '花生酱+芝麻油=超浓郁花生香 没有汤粉 用了白砂糖',
          categoryName: '家常菜',
          imgUrl: '/imgs/a.jpg',
          viewCount: 8,
          commentCount: 0,
          createTime: '2024/2/22'
        }]
    }
  },
}
</script>

<style scoped>

</style>
